<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.mc.lp.view.constants.*;"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<div ng-controller="UserSportsController as usportc" ng-init="usportc.init(selectedStudentProfile,usc)">
	<section class="content">
	<div class="row">
			<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
				<!-- Overall Grid -->
				<div class="box box-primary" style="height: 50%;">
					<div class="box-header">
						<i class="fa  fa-table"></i>
						<h3 class="box-title">Overall Participation</h3>
					</div>
					<div class="box-body" style="max-height: 75%; min-height: 75%; overflow: auto">
						<table class="table table-responsive sm-font centerText table-hover bubble-table " >
							<tr ng-repeat="row in strengthData.rows">
								<td width="10%">{{row.name}}</td>
								<td ng-repeat="val in row.values">
								<span class="fa fa-circle md-font" style="color: green" ng-show="(val.flag)"></span>
								<span class="fa fa-circle md-font" style="color: red" ng-show="(!val.flag && val.valid)"></span>
								<span class="fa fa-circle-o md-font" ng-show="(!val.flag && !val.valid)"></span></td>
							</tr>
							<tr>
								<td width="15%"></td>
								<td ng-repeat="row in strengthData.xAxis">{{row}}</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
			
			
			<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
				<!-- Recommendations chart -->
				<div class="box box-primary" style="height: 50%;">
					<div class="box-header">
						<i class="fa  fa-tachometer"></i>
						<h3 class="box-title">Recommendations-{{studentProfile.totalGradeInfo[recommendationPageNumber].value}}</h3>
					</div>
					<div class="box-body" style="max-height: 75%; min-height: 75%; overflow: auto">
						<div ng-show="!isRecommendationFound" class="message">No Recommendations found for this year.</div>
						<div class="message" ng-repeat="r in recommendations" ng-show="isRecommendationFound">
							<div class="bg-info">
								<div>
									<a class="name" href="#"><b>{{r.recommendationtitle}}</b></a>
								</div>
								<div>{{r.recommendationText}}</div>
							</div>
							<div class="clear-fix">&nbsp;</div>
						</div>

					</div>
					<div class="box-footer clearfix">
						<span>Page {{recommendationPageNumber+1}} of {{getTotalCount('RECOMMENDATION')}}</span>
						<ul class="pagination pagination-sm no-margin pull-right">
							<li><button ng-disabled="(recommendationPageNumber>=(getTotalCount('RECOMMENDATION')-1))" ng-click="previous('RECOMMENDATION')">Prev</button></li>
							<li><button ng-disabled="recommendationPageNumber<=0" ng-click="next('RECOMMENDATION')">Next</button></li>
						</ul>
					</div>
					<!-- /.box-body-->
				</div>
				<!-- /.box -->
			</div>
			
			
		</div>
		<div class="row">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<!-- Overall Grid -->
				<div class="box box-primary" style="height: 50%;">
					<div class="box-header">
						<i class="fa  fa-table"></i>
						<h3 class="box-title">Overall Participation</h3>
					</div>
					<div class="box-body" ng-hide="showGrid" style="max-height: 75%; min-height: 75%; overflow: auto">No Data Available</div>
					<div class="box-body" ng-show="showGrid" style="max-height: 75%; min-height: 75%; overflow: auto">
						<table class="table table-bordered sm-font">
							<tbody>
								<tr>
									<th style="width: 2%">Grades</th>
									<th style="width: 15%; text-align: center">Sports</th>
								</tr>
								<tr ng-repeat="class in gridData.gradeList">
									<td><b>{{class.key}}</b></td>
									<td>
										<table class="table table-responsive sm-font">
											<thead>
												<tr class="alert-success">
													<th width="2%">Date</th>
													<th>Event</th>
													<th width="2%" class="nowrap">Competition Level</th>
													<th width="2%" class="nowrap">Rank</th>
													<th width="2%" class="nowrap">Medal</th>
													<th width="20%" class="nowrap">Other Details</th>
												</tr>
											</thead>
											<tbody>
												<tr ng-repeat="row in class.value">
													<td>{{row.dated}}</td>
													<td>{{getSportName(row.sportId)}}</td>
													<td>{{getCompetetion(row.competitionLevel)}}</td>
													<td>{{row.ranking}}</td>
													<td>{{row.medal}}</td>
													<td><a ng-show="row.sportsAttachmentId>0" target="_self" ng-href="/mc-mvc/shared/filedownload/{{row.sportsAttachmentId}}">
															<button class="btn btn-success btn-sm" type="button">Download Certificate</button>
													</a></td>
												</tr>
											</tbody>
										</table>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="box-footer clearfix" ng-hide="!showGrid">
						<span>Page {{gridPageNumber+1}} of {{getTotalCount('GRID')}}</span>
						<ul class="pagination pagination-sm no-margin pull-right">
							<!-- <li><a href="#">«</a></li>-->
							<li><button ng-disabled="(gridPageNumbeor>=(getTotalCount('GRID')-1))" ng-click="previous('GRID')">Prev</button></li>
							<li><button ng-disabled="gridPageNumber<=0" ng-click="next('GRID')">Next</button></li>
						</ul>
					</div>
					<!-- /.box-body-->
				</div>
				<!-- /.box -->
			</div>
		</div>
	</section>
</div>